<template>
  <div class="shijiantaishi">
    <div class="top">时间态势</div>
    <div class="left">
      <pinpu></pinpu>
      <div class="content">
        <p>选择用户查看时间态势</p>
        <a-select
        ref="select"
        v-model:value="select1"
        style="width: 100%;margin-bottom: 5px;"
        :placeholder="'模拟用户1'"
        allowClearget_mset
      >
        <a-select-option
          :value="item.value"
          v-for="item in typeOptions"
          :key="item.label"
        >{{
          item.value
          }}</a-select-option>
      </a-select>
      </div>
    </div>
    <div class="right">
      <timeLine></timeLine>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import pinpu from './charts/pinpu.vue'
import timeLine from './charts/timeLineComp.vue'
export default defineComponent({
  components: { pinpu,timeLine },
  name: 'shijiantaishi',
  setup() {
    let select1 = ref();
    const typeOptions = ref([
      {
        value: '1',
        label: 'M710a',
      },
      {
        value: '2',
        label: 'M650',
      },
      {
        value: '3',
        label: 'M650',
      },
    ]);
    return {
      select1,
      typeOptions
    }
  },
})
</script>
<style scoped lang=less>
.shijiantaishi {
  width: 100%;
  height: 100%;
  // background: #fff;
  display: flex;
  flex-wrap: wrap;

  .top {
    width: 100%;
    height: 80px;
    background: #F6F6F8;
    padding: 10px 0;
    padding-left: 20px;
    font-size: 25px;
    display: flex;
    align-items: center;
  }
  .left{
    width: 60%;
    height: 100%;
    padding-left: 35px;
    p{
      margin-bottom: 0;
    }
  }
  .right{
    width: 40%;
    height: 100%;
  }
}
</style>